<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>iDrag &amp; iDialog by Dreamback</title>
	<link rel="stylesheet" href="css/style.css">

	<script src="lib/js/jquery-1.8.3.min.js"></script>
  	<script src="lib/js/jquery.iDialog.js" dialog-theme="default"></script>


	<script src="js/syntaxhighlighter/scripts/shCore.js"></script>
	<script src="js/syntaxhighlighter/scripts/shBrushJScript.js"></script>
	<link rel="stylesheet" href="js/syntaxhighlighter/styles/shCoreDefault.css"/>
	<script type="text/javascript">
	SyntaxHighlighter.config.toolbar = true;
	SyntaxHighlighter.all();</script>
</head>
<body>
	<div class="side">
		<h1 class="logo">
			<i class="i">iDrag <br />
				&amp; <br />
				iDialog
			</i>
			<i class="j">iDrag <br />
				&amp; <br />
				iDialog
			</i>
		</h1>
		<ul class="nav">
			<li><a class="cur" href="index.html" target="_self">首页</a></li>
			<li><a href="API.html" target="_self">API</a></li>
			<li><a href="LAB.html" target="_self">实验室</a></li>
      <li><a href="https://github.com/dreamback/idialog" target="_blank">github</a></li>
      <li><a href="https://github.com/dreamback/idialog/archive/gh-pages.zip" target="_blank">下载</a></li>
		</ul>
		<p class="copyright">
			heshimeng1987@qq.com
		</p>
	</div>
	<div class="bd">
<h2>iDrag &amp; iDialog 介绍</h2>

<h3>特点：</h3>

<p>jquery.iDialog.js依赖于jquery编写的简单易用的对话框，同时还可以通过添加css3，改变对话框的展现动画。
提供了两个方法：</p>

<ul>
<li>1、拖拽函数 iDrag() 或 $.drag();</li>
<li>2、对话框函数 iDialog() 或 $.dialog(); </li>
</ul>

<h3>跨平台兼容:</h3>

<p>兼容：IE6+、Firefox、Chrome等主流浏览器(其它暂时没条件测试)。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件。 </p>

<h3>渐进增强的体验:</h3>

<p>确保IE家族功能完善的前提下，现代浏览器适当的添加css3增强体验，如阴影、圆角、和<code>scale show</code>、<code>super scale show</code> 、<code>right slide show</code>动画,动画亦可自己修改css文件进行扩展。 </p>

<h3>丰富的接口:</h3>

<p>1．<code>$.drag()</code>函数，提供了拖拽范围设置，拖拽前，拖拽过程，拖拽结束的回调函数；
2．<code>$.dialog()</code>函数，提供了css3展示特效、大小、位置、显示、关闭和外部访问接口等，更多参考后面的<code>API</code>。 </p>

<h3>快速入门：</h3>

<pre  class="brush: js">&lt;script src=&quot;lib/js/jquery-1.8.3.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;lib/js/jquery.iDialog.js&quot; dialog-theme=&quot;default&quot;&gt;&lt;/script&gt;</pre>   

<ul>
<li><code>jquery.iDialog.js</code>是依赖jquery实现的，所以加载它之前必须加载jQuery;</li>
<li><code>dialog-theme=&quot;default&quot;</code>表示将自动加载<code>default.css</code>样式表;</li>
<li><code>default.css</code>必须保存在theme文件夹里，且该文件夹与<code>jquery.iDialog.js</code>需在同一目录下。</li>
</ul>

<h3>iDrag()完整例子:</h3>

<p>拖拽下方的正方形</p>

<style>
  .parent-wrapper{width:688px;height:200px;border:1px solid #ccc;background:#fff;position:relative;color:red;}
  #drag-demo{cursor:move;width:30px;height:30px;background:#66D9EF;top:20px;left:20px;position:absolute;}
</style>
       <div class="parent-wrapper">
         <div id="drag-demo-log"></div>
         <div id="drag-demo">
         </div>
       </div>
       <script>
      (function(){
             var log = $('#drag-demo-log');
              iDrag({
                target:'#drag-demo',
                min:{x:0, y:0},
                max:{x:658, y:170},
                start: function (pos) {
                  log.html('start:x='+pos.x+', y='+pos.y);
                },
                move: function(pos){
                  log.html('move:left='+pos.x+', top='+pos.y);
                },
                end: function(pos){
                   log.html('end:left='+pos.x+', top='+pos.y);
                }
              });
      })();
       </script>

<p>JS代码： </p>

<pre class="brush: js">
  var log = $('#drag-demo-log');
  iDrag({
    target:'#drag-demo',
    min:{x:0, y:0},
    max:{x:658, y:170},
    start: function (pos) {
      log.html('start:x='+pos.x+', y='+pos.y);
    },
    move: function(pos){
      log.html('move:left='+pos.x+', top='+pos.y);
    },
    end: function(pos){
       log.html('end:left='+pos.x+', top='+pos.y);
    }
  });
</pre>

<h3>iDialog()例子:</h3>

<pre class="brush: js">
  iDialog({
      title:'Hello World',
      id:'DemoDialog  ',
      content:'<p>大家好：<br> 我是minDialog</p>',
      lock: true,
      width:500,
      fixed: true,
      height:300
  }); 
</pre>

<div><input id="demoBtn" type="button" value="运行"></div>

<script>
          $(function(){
            $('#demoBtn').click(function(){
              $.dialog({
                title:'Hello World',
                id:'DemoDialog  ',
                content:'<p>大家好：<br> 我是minDialog</p>',
                lock: true,
                width:500,
                fixed: true,
                height:300
              });
            });
          });
        </script>

<h3>更多&gt;&gt;</h3>

<p>更多方法请查看<a href="API.html">API</a></p>

<p>任何问题可以联系：<a href="mailto:heshimeng1987@qq.com">heshimeng1987@qq.com</a> </p>

<!-- UY BEGIN -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=1860903"></script>
<!-- UY END -->

	</div>
<div style="display:none;">
	<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fc42cb4943b0953279de070cd24fdb2f9' type='text/javascript'%3E%3C/script%3E"));
</script>



</div>
</body>
</html>